Vue3 Composition API

「”なぜ” Composition APIを使うのか」

その理由は、

「ロジックの抽出と再利用」をするためです。

「ロジックの抽出と再利用」が必要な理由は、

複雑に肥大化したコンポーネントを、小分けにして関心事で分別し、クリーンな状態に整理するためです。

これまでのVue2.xでは、「複数のコンポーネント間でロジックを抽出して再利用するためのクリーンでコストのかからないメカニズム」が欠如していました。

これを解決するのが、Composition APIです。

Composition APIによって、コンポーネントのコードを整理する際に、開発者により高い柔軟性を提供します。

コンポーネント間で、ロジックや状態を抽出して再利用することが、簡単になります。

SFCに記述するのはViewの見た目に関することだけにして、ロジックや状態を外部に切り出せるようになるのです。

コンポーネント間でロジックを抽出して再利用できるようになる

ロジックを抽出することで、単体テストが実行しやすくなる

つまり、Composition APIは、肥大化したコンポーネントを小さく切り刻むための聖剣なのです。

肥大化したコンポーネントを小さく分割するための剣

小さいコンポーネントで無理に使う必要はないし、使うと複雑になる

https://www.youtube.com/watch?v=9s2yVL534xs

setup 関数が肝

setup()では、thisが参照できない

ref()関数を使って reactiveにする

ref()とreactive()の違いはややこしいので注意。

mounted や computed などを setup でまとめることができる

みなさんは、VueのProviderパターン(provide/inject)って使ったことありますか?

composition api を使ってコンポーネントから状態とロジックを抽出したとして、どうやって状態を共有するのか？の解決策

Composition APIで「状態とロジックを切り出して」Providerで「運ぶ」って感じです。

まとめ

Composition APIを使って、散らかった部屋の荷物をダンボールに梱包して、外に出そう。

Composition APIを使って梱包した荷物を運ぶのがProviderの役目

Providerで、親コンポーネントから子コンポーネントに共通の状態を簡単に受け渡すことができる。

Prop渡しと違ってバケツリレーをする必要がない。

今後、Vue3ではProviderの改善が進むと予想